<template>
  <a-input v-model:value="value" allowClear @click.stop="open">
    <template #addonAfter>
      <span @click.stop="open" style="cursor: pointer"> <ExIcon :icon="value" v-if="value"></ExIcon><template
          v-else>请选择</template></span>
    </template>
  </a-input>
  <div class="icons" ref="el" v-show="visible">
    <div class="search">
      <a-form-item-rest>
        <a-input
            v-model:value="searchValue"
            placeholder="输入关键词进行搜索"
            @change="filterIcons"
        >
          <template #suffix>
            <search-outlined/>
          </template>
        </a-input>
      </a-form-item-rest>
    </div>
    <ul class="iconCollection">
      <li v-for="icon in faIcon" @click="selectIcon(icon)" :key="icon">
        <i :class="icon"></i>
      </li>
      <li v-for="icon in antdIcon" @click="selectIcon(icon)" :key="icon">
        <component :is="icon"></component>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "ExSelectIcon",
}
</script>
<script setup>
import fab from "@/fa-icon/fab.json"
import far from "@/fa-icon/far.json"
import fas from "@/fa-icon/fas.json"
import {ref, watch, onMounted, onBeforeUnmount} from 'vue'
import * as Icons from '@ant-design/icons-vue'
const antDesignIcons = []
for (const i in Icons) {
  if (['createFromIconfontCN', 'default', 'getTwoToneColor', 'setTwoToneColor'].indexOf(i) > -1) continue
  antDesignIcons.push(i)
}
let fontAwesome = fas.map(s => "fas fa-" + s)
fontAwesome = fontAwesome.concat(far.map(s => "far fa-" + s))
fontAwesome = fontAwesome.concat(fab.map(s => "fab fa-" + s))
const faIcon = ref([])
const antdIcon = ref([])
let init = false
const props = defineProps({
  value: String,
})
const emit = defineEmits(['update:value'])
const el = ref()
const searchValue = ref()
const visible = ref(false)
const value = ref(props.value)
watch(value, (val) => {
  emit('update:value', val)
})

function clickHandler(e) {
  if (el.value.contains(e.target)) {
    return false
  }
  visible.value = false
}

onMounted(() => {
  document.addEventListener("click", clickHandler)
})
onBeforeUnmount(() => {
  document.removeEventListener("click", clickHandler)
})

function selectIcon(icon) {
  value.value = icon
  visible.value = false
}

function open() {
  if (!init) {
    antdIcon.value = antDesignIcons
    faIcon.value = fontAwesome
    init = true
  }
  visible.value = true
}

function filterIcons() {
  antdIcon.value = antDesignIcons.filter(item => {
    return item.indexOf(searchValue.value) >= 0
  })
  faIcon.value = fontAwesome.filter(item => {
    return item.indexOf(searchValue.value) >= 0
  })
}
</script>
<style scoped lang="scss">
.icons {
  position: fixed;
  z-index: 1000;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 2px;
  box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
}
.icons .search{
  padding: 10px 10px 0;
}
.iconCollection {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  width: 910px;
  height: 400px;
  overflow-y: auto;
  margin: 10px;
}

.iconCollection li {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 1px solid #ededed;
  line-height: 40px;
  text-align: center;
}

.iconCollection li:hover {
  background: #1890ff;
  color: #ffffff;
}

.iconCollection span {
  font-size: 20px;
}

.iconCollection i {
  font-size: 20px;
}

.dark-theme{
  .icons{
    background: #1f1f1f;
  }
  .iconCollection li {
    border: 1px dashed #434343;
  }
}
</style>
